<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>vue原生计数器</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>

    <!-- 写模板方式1 -->
    <!-- <script type="x-template" id="template1">
        <div>{{count}}</div>
        <button @click='increment'>-</button>
        <button v-on:click='decrement'>+</button>
    </script> -->

    <!-- 写模板方式2 -->
    <!-- <template id="template1">
        <div>{{count}}</div>
        <button @click='increment'>-</button>
        <button v-on:click='decrement'>+</button>
    </template> -->

    <script>
        //v-on相当于@
        //声明式编程，数据绑定式编程  MVVM:model(原生的JavaScript对象、数据)-view-viewModel（‘中介’：进行绑定）
        //data返回的对象会被vue响应式系统劫持
        //可以在两个大括号里面直接使用methods定义的函数
        Vue.createApp({
            template:`
            <div>{{count}}</div>
            <button @click='increment'>-</button>
            <button v-on:click='decrement'>+</button>
            `,
            // template:"#template1",
            // template:"#template2",
            // data:() => {
            //     return {count:0}
            // },//不可以写箭头函数，因为会找不到this属性或者找到的是window对象
            data(){
                return {count:0}
            },
            methods:{
                increment:function(){
                    this.count --//this绑定的是当前的这个实例
                },
                decrement(){
                    this.count ++
                },
            }
        }).mount("#app");
    </script>
    
</body>
</html>